import React from 'react';
import {
  Modal,
  Descriptions,
  Tag,
  Progress,
  List,
  Avatar,
  Row,
  Col,
  Card,
  Statistic,
  Divider,
} from 'antd';
import dayjs from 'dayjs';
import { getStatusColor, CHECKIN_STATUS_OPTIONS } from '../CheckType';

const ActivityDetail = ({ visible, activity, onCancel }) => {
  if (!activity) return null;

  const getStatusLabel = (status) => {
    const statusConfig = CHECKIN_STATUS_OPTIONS.find(s => s.value === status);
    return statusConfig?.label || '未知状态';
  };

  // 计算活动进度
  const calculateProgress = () => {
    if (!activity.targetDays) return 0;
    const completedDays = activity.completedDays || 0;
    return Math.round((completedDays / activity.targetDays) * 100);
  };

  const progress = calculateProgress();

  return (
    <Modal
      title={`活动详情 - ${activity.title}`}
      visible={visible}
      onCancel={onCancel}
      footer={null}
      width={800}
      destroyOnClose
    >
      <Row gutter={16}>
        <Col span={16}>
          {/* 基本信息 */}
          <Card title="基本信息" size="small" style={{ marginBottom: 16 }}>
            <Descriptions column={2} size="small">
              <Descriptions.Item label="活动名称">
                {activity.title}
              </Descriptions.Item>
              <Descriptions.Item label="开始时间">
                {dayjs(activity.startDate).format('YYYY-MM-DD')}
              </Descriptions.Item>
              <Descriptions.Item label="结束时间">
                {dayjs(activity.endDate).format('YYYY-MM-DD')}
              </Descriptions.Item>
              <Descriptions.Item label="目标天数">
                {activity.targetDays} 天
              </Descriptions.Item>
              <Descriptions.Item label="活动状态">
                <Tag color={getStatusColor(activity.status)}>
                  {getStatusLabel(activity.status)}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="创建人">
                {activity.createdBy}
              </Descriptions.Item>
              <Descriptions.Item label="创建时间" span={2}>
                {dayjs(activity.createdAt).format('YYYY-MM-DD HH:mm:ss')}
              </Descriptions.Item>
            </Descriptions>
            
            <Divider />
            
            <div>
              <h4>活动描述</h4>
              <p style={{ color: '#666', lineHeight: 1.6 }}>
                {activity.description}
              </p>
            </div>
          </Card>

          {/* 进度统计 */}
          <Card title="进度统计" size="small" style={{ marginBottom: 16 }}>
            <Row gutter={16}>
              <Col span={8}>
                <Statistic
                  title="目标天数"
                  value={activity.targetDays || 0}
                  suffix="天"
                />
              </Col>
              <Col span={8}>
                <Statistic
                  title="已完成天数"
                  value={activity.completedDays || 0}
                  suffix="天"
                />
              </Col>
              <Col span={8}>
                <Statistic
                  title="完成进度"
                  value={progress}
                  suffix="%"
                />
              </Col>
            </Row>
            
            <Divider />
            
            <div>
              <h4>活动进度</h4>
              <Progress
                percent={progress}
                status={progress >= 100 ? 'success' : 'active'}
                strokeColor={{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }}
              />
              <p style={{ textAlign: 'center', marginTop: 8, color: '#666' }}>
                已完成 {activity.completedDays || 0}/{activity.targetDays || 0} 天
              </p>
            </div>
          </Card>
        </Col>

        <Col span={8}>
          {/* 参与人员 */}
          <Card title="参与人员" size="small" style={{ marginBottom: 16 }}>
            <Statistic
              title="总参与人数"
              value={activity.totalParticipants || 0}
              suffix="人"
              style={{ marginBottom: 16 }}
            />
            
            {activity.participants && activity.participants.length > 0 ? (
              <List
                size="small"
                dataSource={activity.participants}
                renderItem={(participant, index) => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={<Avatar size="small">{participant.charAt(0)}</Avatar>}
                      title={participant}
                      description={`参与者 ${index + 1}`}
                    />
                  </List.Item>
                )}
              />
            ) : (
              <div style={{ textAlign: 'center', color: '#999', padding: '20px 0' }}>
                暂无参与者
              </div>
            )}
          </Card>

          {/* 时间信息 */}
          <Card title="时间信息" size="small">
            <div style={{ fontSize: 12, lineHeight: 1.8 }}>
              <p><strong>开始时间:</strong> {dayjs(activity.startDate).format('YYYY-MM-DD')}</p>
              <p><strong>结束时间:</strong> {dayjs(activity.endDate).format('YYYY-MM-DD')}</p>
              <p><strong>创建时间:</strong> {dayjs(activity.createdAt).format('YYYY-MM-DD HH:mm')}</p>
              <p><strong>更新时间:</strong> {dayjs(activity.updatedAt).format('YYYY-MM-DD HH:mm')}</p>
              
              <Divider />
              
              <div style={{ textAlign: 'center' }}>
                <p style={{ color: '#666' }}>
                  活动持续时间: {dayjs(activity.endDate).diff(dayjs(activity.startDate), 'day')} 天
                </p>
                <p style={{ color: '#666' }}>
                  剩余时间: {Math.max(0, dayjs(activity.endDate).diff(dayjs(), 'day'))} 天
                </p>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </Modal>
  );
};

export default ActivityDetail; 